<template>
  <div class="preview-code">
    <div class="fl">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <div v-if="shopId" v-loading="loading" class="left-container app-main-content-box">
      <!-- 标题 tab  -->
      <!-- <div class="head-box">
        <app-main-title :title="shopName?shopName:''"></app-main-title>
        <div class="tab">
          <el-tabs v-model="tabName">
            <el-tab-pane label="全日房" name="fullDayRoom" />
            <el-tab-pane label="钟点房" name="hourRoom" />
            <el-tab-pane label="KTV" name="ktvRoom" />
            <el-tab-pane label="设施/服务" name="FacilityAndService" />
            <el-tab-pane label="店铺介绍" name="Introduce" />
          </el-tabs>
        </div>
      </div>-->
      <app-main-title :title="shopName?shopName:''" />

      <!-- 异常 -->
      <div v-if="defaultMaIsOnline===false">
        <el-tag type="danger">商户小程序未正式发布，暂时不可以获取二维码！</el-tag>
      </div>

      <!-- 正常 -->
      <div v-else-if="qrCodeUrl" class="content-box">
        <div class="qrcode-img">
          <div class="img">
            <img :src="qrCodeUrl" alt>
          </div>
          <div class="tips">微信扫一扫立即体验</div>
        </div>
        <div class="qrcode-info">
          <div class="cell-item">
            <span>小程序原始ID：</span>
            <span>11111</span>
          </div>
          <div class="cell-item">
            <span>小程序APPID：</span>
            <span>1111</span>
          </div>
          <div class="cell-item">
            <span>小程序路径：</span>
            <span>111111</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      shopId: '',
      shopName: '',
      qrCodeUrl: '',
      defaultMaIsOnline: ''
    }
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取数据
    fetchData() {
      // this.loading = true;
      // this.$store
      //   .dispatch("getAuthMa")
      //   .then(res => {
      //     if (res.base.onlineVersionId) {
      //       this.qrCodeUrl =
      //     } else {
      //       this.defaultMaIsOnline = false;
      //     }
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },

    /**
       * 按钮组
       */
    // 选中门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.qrCodeUrl = ''
      this.defaultMaIsOnline = ''
      this.fetchData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 左边 */
  .left-container {
    overflow: hidden;
  }
  /*  头部 */
  .head-box {
    padding: 24px 30px 0;
    border-radius: 5px;
    background-color: #fff;
    /* tab */
    .tab ::v-deep {
      .el-tabs__header {
        margin-bottom: 0;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
      }
      .el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      .el-tabs__active-bar {
        height: 4px;
      }
    }
  }

  .content-box {
    .qrcode-img {
      padding: 20px 0 40px;
      .img {
        width: 250px;
        height: 250px;
      }
      .tips {
        padding-top: 20px;
        width: 250px;
        text-align: center;
        color: #606266;
        font-size: 14px;
      }
    }
    .qrcode-info {
      padding-top: 40px;
      border-top: 1px solid #e7e7e7;
      .cell-item {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        span:first-child {
          width: 110px;
          text-align: justify;
          text-align-last: justify;
          color: #606266;
        }
      }
    }
  }
</style>
